<template>
	<cl-crud ref="crud" @load="onLoad" :on-refresh="onRefresh">
		<cl-pagefull @resize="onResize">
			<template #head>
				<el-row>
					<cl-title-module
						title="总报表"
						:columns="initColumns"
						:print="printParams"
						v-model="table.columns"
						@export-file="exportExcel"
					/>
				</el-row>
				<el-row type="flex">
					<cl-filter-group v-model="search">
						<cl-filter label="所属事业部">
							<cl-select
								v-model="search.biz_id"
								placeholder="请选择"
								filterable
								@change="changeBiz"
								style="width: 150px"
							>
								<el-option
									v-for="item in business"
									:key="item.biz_id"
									:label="item.biz_name"
									:value="item.biz_id"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="分公司">
							<cl-select
								v-model="search.company_id"
								placeholder="请选择"
								clearable
								filterable
								style="width: 150px"
								@change="refresh"
							>
								<el-option label="全部" value="" />

								<el-option
									v-for="item in bizRefData.company"
									:key="item.company_id"
									:label="item.company_name"
									:value="item.company_id"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="品牌">
							<cl-select
								v-model="search.bra_id"
								placeholder="全部"
								clearable
								filterable
								multiple
								collapse-tags
								style="width: 150px"
								@change="refresh"
							>
								<el-option
									v-for="item in bizRefData.brand"
									:key="item.bra_id"
									:label="item.bra_name"
									:value="item.bra_id"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="消费时间">
							<cl-date-picker
								v-model="search.date"
								type="daterange"
								range-separator="至"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								value-format="yyyy-MM-dd"
								:clearable="false"
								style="width: 210px"
								@change="refresh"
							/>
						</cl-filter>
						<cl-filter label="所属城市">
							<cl-select
								v-model="search.city_id"
								style="width: 100%"
								placeholder="请选择城市"
								multiple
								collapse-tags
								filterable
							>
								<el-option
									:label="item.label"
									:value="item.id"
									v-for="(item, index) in cityList"
									:key="index"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="所属门店">
							<cl-shop-select
								v-model="search.dept_id"
								placeholder="请选择"
								filterable
								clearable
								style="width: 150px"
								@change="refresh"
								show-all
								:biz_id="search.biz_id"
							/>
						</cl-filter>
					</cl-filter-group>
				</el-row>
			</template>

			<el-row v-loading="loading">
				<!-- 数据表格 -->
				<zm-table id="summaryReport" v-bind="table" :data="list"></zm-table>
			</el-row>
		</cl-pagefull>
	</cl-crud>
</template>
<script>
import { exportExcel } from "@/utils/excel";
import dayjs from "dayjs";
export default {
	name: "FinanceSummaryReport",
	data() {
		return {
			printParams: {
				id: "summaryReport",
				popTitle: "总报表"
			},
			// 表格配置
			table: {
				"context-menu": ["refresh"],
				columns: [],
				props: {
					showSummary: true,
					summaryMethod: this.getSummaries,
					maxHeight: 500
				}
			},
			initColumns: [
				{ label: "序号", type: "index", width: 50, fixed: true, disable: true },
				// { label: "日期", prop: "date", minWidth: 100, fixed: true },
				{
					label: "所属事业部",
					prop: "biz_name",
					minWidth: 150,
					fixed: true,
					align: "left",
					showOverflowTooltip: true
				},
				// {
				// 	label: "所属公司",
				// 	prop: "company_name",
				// 	minWidth: 150,
				// 	fixed: true,
				// 	align: "left",
				// 	showOverflowTooltip: true
				// },
				{
					label: "大区",
					prop: "first_zone",
					minWidth: 150,
					fixed: true,
					align: "left",
					showOverflowTooltip: true
				},
				{
					label: "门店",
					prop: "dept_name",
					minWidth: 150,
					fixed: true,
					align: "left",
					showOverflowTooltip: true
				},
				{ label: "排客数", prop: "plan_arrive", width: 100 },
				{
					label: "城市",
					prop: "city_name",
					minWidth: 150,
					showOverflowTooltip: true
				},
				{
					label: "门店类型",
					width: 150,
					prop: "type_name"
				},
				{
					label: "实际业绩(￥)",
					width: 120,
					prop: "actually_achieve"
				},
				{
					label: "成本业绩(￥)",
					width: 120,
					prop: "cost_achieve"
				},
				{
					label: "总业绩(￥)",
					width: 120,
					prop: "total_achieve"
				},
				{
					label: "手工费(￥)",
					width: 120,
					prop: "sgmoney",
					formatter: row => `${this.toFixed(row.sgmoney)}`
				},
				// {
				// 	label: "推广部门",
				// 	children: [
				// 		{
				// 			label: "加微信",
				// 			children: [
				// 				{ label: "目标", prop: "wechat_target", width: 100 },
				// 				{ label: "实际", prop: "wechat_actually", width: 100 },
				// 				{
				// 					label: "比例",
				// 					prop: "wechat_rate",
				// 					width: 100,
				// 					formatter: row => `${row.wechat_rate || 0}%`
				// 				},
				// 				{ label: "推广费目标", prop: "expense_target", width: 100 },
				// 				{ label: "推广费消耗", prop: "expense_cost", width: 100 },
				// 				{
				// 					label: "客单价(￥)",
				// 					prop: "wechat_cus_price",
				// 					width: 110
				// 				}
				// 			]
				// 		}
				// 	]
				// },
				// {
				// 	label: "咨询部门",
				// 	children: [
				// 		{
				// 			label: "下定金",
				// 			children: [
				// 				{ label: "目标", prop: "deposit_target", width: 100 },
				// 				{ label: "实际", prop: "deposit_actually", width: 100 },
				// 				{
				// 					label: "微信转化率",
				// 					prop: "deposit_rate",
				// 					width: 100,
				// 					formatter: row => `${row.deposit_rate || 0}%`
				// 				}
				// 			]
				// 		},
				// 		{
				// 			label: "到店率",
				// 			children: [
				// 				{ label: "目标", prop: "arrive_target", width: 100 },
				// 				{ label: "实际", prop: "arrive_actually", width: 100 },
				// 				{
				// 					label: "到店率",
				// 					prop: "arrive_rate",
				// 					width: 100,
				// 					formatter: row => `${row.arrive_rate || 0}%`
				// 				}
				// 			]
				// 		}
				// 	]
				// },
				{
					label: "门店业绩(￥)",
					children: [
						{
							label: "咨询",
							width: 120,
							prop: "cart_achieve"
						},
						{
							label: "加单",
							width: 120,
							prop: "plus_achieve"
						},
						{
							label: "门开",
							width: 120,
							prop: "door_opened"
						},
						{
							label: "转介绍",
							width: 120,
							prop: "turn_achieve"
						},
						{
							label: "新客",
							width: 120,
							prop: "new_achieve"
						},
						{
							label: "店长/业绩比例",
							width: 120,
							prop: "shop_manage",
							formatter: row => `${row.shop_manage || 0}%`
						}
					]
				},
				{
					label: "人数",
					children: [
						{ label: "老客数", prop: "old_arrive", width: 100 },
						{ label: "新客数", prop: "new_arrive", width: 100 },
						{ label: "老转新", prop: "old_new_arrive", width: 100 },
						{ label: "转介绍", prop: "turn_arrive", width: 100 },
						{ label: "总客数", prop: "total_arrive", width: 100 }
					]
				},
				{
					label: "客单价(￥)",
					width: 100,
					prop: "customer_price"
				}
			],
			list: [],
			cityList: [],
			search: {
				dept_id: "", //门店名称
				biz_id: "", //事业部
				company_id: "",
				bra_id: [],
				city_id: [],
				date: [
					dayjs()
						.startOf("day")
						.format("YYYY-MM-DD"),
					dayjs()
						.endOf("day")
						.format("YYYY-MM-DD")
				], //时间
				begin_time: "", //开始时间
				end_time: "" //结束时间
			},
			load: false,
			loading: false
		};
	},
	computed: {
		bizRefData() {
			let { biz_id } = this.search;
			return this.getBizRefData(biz_id);
		}
	},
	created() {
		const { initColumns } = this;
		this.table.columns = initColumns;
		this.search.biz_id = this.getCurrBiz();
		this.init();
	},
	methods: {
		onResize(h) {
			this.table.props.maxHeight = h;
		},
		onLoad({ ctx, app }) {
			ctx.service(this.$service.finance)
				.set("dict", {
					api: {
						page: "totalStatistic"
					}
				})
				.done();
			// app.refresh(this.search);
		},
		// crud刷新
		refresh() {
			this.$refs.crud.refresh({ page: 1, ...this.search });
		},
		async onRefresh(params, { next, render }) {
			this.loading = true;
			const data = await next(params).finally(() => {
				this.loading = false;
			});
			this.list = data;
			render(data);
		},
		//打印
		exportExcel() {
			exportExcel("#summaryReport");
		},
		async init() {
			const { biz_id } = this.search;
			this.getBizRefCompany(biz_id);
			this.getBizRefBrand(biz_id);
			this.getBizRefShop(biz_id);
			this.getcityList();
		},
		changeBiz() {
			this.search = {
				...this.search,
				company_id: "",
				bra_id: [],
				city_id: [],
				dept_id: ""
			};
			this.init();
			this.refresh();
		},
		// 表格合计
		getSummaries({ columns, data }) {
			let ignore = ["date", "biz_name", "company_name", "bra_name", "dept_name"];
			let actually_achieve = 0,
				plan_achieve = 0,
				wechat_actually = 0,
				wechat_target = 0,
				deposit_actually = 0,
				deposit_target = 0,
				arrive_actually = 0,
				arrive_target = 0,
				cart_achieve = 0,
				total_arrive = 0,
				total_achieve = 0,
				new_arrive = 0;
			return columns.map((column, index) => {
				if (index === 0) {
					return "合计";
				}
				if (ignore.includes(column.property)) return "";
				if (column.property == "finish_rate") {
					if (plan_achieve) {
						let result = actually_achieve / plan_achieve;
						return this.toFixed(result * 100) + "%";
					} else {
						return 0 + "%";
					}
				}
				if (column.property == "wechat_rate") {
					if (wechat_target) {
						let result = wechat_actually / wechat_target;
						return this.toFixed(result * 100) + "%";
					} else {
						return 0 + "%";
					}
				}
				if (column.property == "deposit_rate") {
					if (deposit_target) {
						let result = deposit_actually / deposit_target;
						return this.toFixed(result * 100) + "%";
					} else {
						return 0 + "%";
					}
				}
				if (column.property == "arrive_rate") {
					if (arrive_target) {
						let result = arrive_actually / arrive_target;
						return this.toFixed(result * 100) + "%";
					} else {
						return 0 + "%";
					}
				}
				if (column.property == "arrive_rate") {
					if (arrive_target) {
						let result = arrive_actually / arrive_target;
						return this.toFixed(result * 100) + "%";
					} else {
						return 0 + "%";
					}
				}

				if (column.property == "customer_price") {
					if (total_arrive) {
						let result = total_achieve / total_arrive;
						return this.toFixed(result);
					} else {
						return 0;
					}
				}

				if (column.property == "customer_new_price") {
					if (new_arrive) {
						let result = total_achieve / new_arrive;
						return this.toFixed(result);
					} else {
						return 0;
					}
				}

				// if (column.property == "door_opened") {
				// 	let result = total_achieve - cart_achieve;
				// 	return this.toFixed(result);
				// }
				if (column.property == "shop_manage") {
					return "";
				}
				const values = data.map(item => Number(item[column.property]));
				let sum = values.reduce((prev, curr) => {
					const value = Number(curr);
					if (!isNaN(value)) {
						return prev + curr;
					}
					return prev;
				}, 0);
				if (column.property == "actually_achieve") {
					actually_achieve = sum;
				}
				if (column.property == "plan_achieve") {
					plan_achieve = sum;
				}
				if (column.property == "wechat_actually") {
					wechat_actually = sum;
				}
				if (column.property == "wechat_target") {
					wechat_target = sum;
				}
				if (column.property == "deposit_actually") {
					deposit_actually = sum;
				}
				if (column.property == "deposit_target") {
					deposit_target = sum;
				}
				if (column.property == "arrive_actually") {
					arrive_actually = sum;
				}
				if (column.property == "arrive_target") {
					arrive_target = sum;
				}
				if (column.property == "cart_achieve") {
					cart_achieve = sum;
				}
				if (column.property == "total_achieve") {
					total_achieve = sum;
				}
				if (column.property == "total_arrive") {
					total_arrive = sum;
				}
				if (column.property == "new_arrive") {
					new_arrive = sum;
				}

				return this.toFixed(sum);
			});
		},
		//获取城市列表
		async getcityList() {
			const { biz_id, bra_id } = this.search;
			this.$service.spread.newGetbizcity({ biz_id, bra_id }).then(data => {
				let list = (data || []).map(v => ({ ...v, label: v.name, value: v.id }));
				this.cityList = list;
			});
		},
	}
};
</script>
<style lang="scss" scoped>
::v-deep {
	.el-table {
		width: 99.9% !important;
	}
	.el-table--scrollable-x {
		.el-table__body-wrapper {
			z-index: 2;
		}
	}
}
</style>
